import React, { Component } from 'react';
import axios from 'axios';
import { Spin } from 'antd';
// import $ from  'jquery';
import './AlbumList.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
        pop : this.props.match.params.id,
        loading : true,
        List : []
    }
  }

  componentDidMount () {
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.pop+'&type=album&limit=25&offset=0')
      .then(data => {
        console.log(data)
        this.setState({
            List : data.data.data.albums,
            loading : false
        })
      })
      .catch((err) => {
        console.log(err)
      })
  }

  render () {
    return (
      <div className = "AlbumList">
        <ul>
          <li>
            <p>专辑</p>
            <span>歌手</span>
            <b>发行公司</b>
          </li>
          {
            this.state.loading
            ?
            <Spin size="large" />
            :
            this.state.List.map((item, index) => {
            return (
              <li key={ item.id }>
                <p>
                  <img src={item.picUrl} alt=""/>
                  { item.name }
                </p>
                <span>{ item.artist.name }</span>
                <b>{ item.company }</b>
              </li>
            )
            })
          }
        </ul>
      </div>
    )
  }
}

export default Com;
